<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Lista en árbol</title>
    <style>
      .contenedor-arbol, .contenedor-arbol ul, .contenedor-arbol li {
           position: relative;
      }

      .contenedor-arbol ul {
          list-style: none;
      }

      .contenedor-arbol li::before, .contenedor-arbol li::after {
          content: "";
          position: absolute;
          left: -12px;
      }

      .contenedor-arbol li::before {
          border-top: 2px solid green;
          top: 9px;
          width: 8px;
          height: 0;
      }

      .contenedor-arbol li::after {
          border-left: 2px solid brown;
          height: 100%;
          width: 0px;
          top: 2px;
      }

      .contenedor-arbol ul > li:last-child::after {
          height: 8px;
      }
    </style>
  </head>
  <body>
    <div class="contenedor-arbol">
      <ul>
        <li>static
          <ul>
            <li>css
              <ul>
                <li>style.css</li>
              </ul>
            </li>
             <li>genericons
               <ul>
                 <li>COPYING.txt</li>
                 <li>genericons.css</li>
                 <li>Genericons.eot</li>
                 <li>Genericons.svg</li>
                 <li>Genericons.ttf</li>
                 <li>Genericons.woff</li>
                 <li>LICENSE.txt</li>
                 <li>README.md</li>
               </ul>
             </li>
            <li>images
              <ul>
                <li>creativecommons_public-domain_80x15.png</li>
                <li>gnu-head-mini.png</li>
                <li>questioncopyright-favicon.png</li>
              </ul>
            </li>
            <li>js
              <ul>
                <li>functions.js</li>
                <li>jquery-3.1.1.js</li>
              </ul>
              </li>
          </ul>
        </li>
        <li>templates
          <ul>
            <li>archives.html</li>
            <li>article.html</li>
            <li>article_info.html</li>
            <li>author.html</li>
            <li>authors.html</li>
            <li>base.html</li>
            <li>category.html</li>
            <li>index.html</li>
            <li>page.html</li>
            <li>pagination.html</li>
            <li>period_archives.html</li>
            <li>tag.html</li>
            <li>taglist.html</li>
            <li>tags.html</li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>
